<template>
	<!-- 页面内容--回到首页之前的页面 -->
	<view style="width: 100vw; min-height: 100vh;background-color: #1F2022; color: #fff;">
		<formheadVue headname="NeoLoan " :pagenum='5' :emptyleft='true'></formheadVue>
		<view class="P-head">
			<view class="P-1 flexcenter">
				<image src="/static/deletesuccess.png" mode=""></image>

			</view>
			<p class='P-word flexcenter'>ใ{{$t('loansuccess')}}</p>
			<p v-if="showpagecutdown" class='P-word brightword flexcenter'>{{ pagedisplayTime }}</p>
			<view @click="gotoPraise()" class="P-3 flexcenter">
				<p>OK</p>
			</view>

		</view>
		<uni-popup ref="praisePopup" type="center" :animation="false" :is-mask-click="false">
			<view class="praisePopupbox flexcenter">
				<u-icon @click="submitOrder()" class="iconposition" name="close-circle-fill" color="#B6B6B6"
					size="24"></u-icon>
				<view class="praisePopup">
					<p style="width: 100%;text-align:center;
					padding:50rpx 20rpx 40rpx 20rpx;
					color: #7F7FD5;
					font-size: 18px;
					">{{$t('praise')}}
					</p>
					<view class="quit-btn flexrowspacebetween">
						<p @click="submitOrder()">
							{{$t('praisecancel')}}
						</p>
						<p @click="gourl()">{{$t('praiseconfirm')}}</p>
					</view>
					<p style="width: 100%;text-align:center;
					padding:20rpx 0;
					color: #CC9AF3;
					font-size: 18px;
					">{{ popupdisplayTime }}
					</p>
				</view>
				<view class="imagebox flexcenter">
					<image src="../../static/praisestar.png" mode=""></image>
					<image src="../../static/praisestar.png" mode=""></image>
					<image src="../../static/praisestar.png" mode=""></image>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import api from '@/pages/utils/api.js'
	import formheadVue from '../../components/formhead.vue';
	import setDot from '@/pages/utils/setdot.js';
	import {
		encryptAES
	} from '@/pages/utils/CryptoJS.js';
	export default {
		data() {
			return {
				showpagecutdown: true,
				pageCountdown: 10,
				pagetimer: null,
				pagedisplayTime: '00:00:10',

				popupCountdown: 10,
				popuptimer: null,
				popupdisplayTime: '00:00:10',
			}
		},
		components: {
			formheadVue
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			return true;
		},
		onShow() {
			this.pagecutdown()
		},
		created() {

		},
		methods: {
			formatTime(seconds) {
				const h = String(Math.floor(seconds / 3600)).padStart(2, '0');
				const m = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
				const s = String(seconds % 60).padStart(2, '0');
				return `${h}:${m}:${s}`;
			},

			popuputdown() {
				this.popupCountdown = 10;
				this.pagedisplayTime = this.formatTime(this.popupCountdown);

				const popupCountdownTimer = () => {
					if (this.popupCountdown <= 0) {
						this.submitOrder()
						return;
					}
					this.popupCountdown--;
					this.popupdisplayTime = this.formatTime(this.popupCountdown);
					this.popuptimer = setTimeout(popupCountdownTimer, 1000);
				};

				popupCountdownTimer();
			},
			pagecutdown() {
				this.pageCountdown = 10;
				this.pagedisplayTime = this.formatTime(this.pageCountdown);

				const pageCountdownTimer = () => {
					if (this.pageCountdown <= 0) {
						this.gotoPraise();
						return;
					}
					this.pageCountdown--;
					this.pagedisplayTime = this.formatTime(this.pageCountdown);
					this.pagetimer = setTimeout(pageCountdownTimer, 1000);
				};

				pageCountdownTimer();
			},
			gourl() {
				console.log('先跳转到外部链接再请求');
				let packageName = 'uni.NeoLoan';
				plus.runtime.openURL(`market://details?id=${packageName}`);
				this.submitOrder()
			},
			gotoPraise() {
				this.showpagecutdown = false
				clearTimeout(this.pagetimer); // 清除页面定时器
				this.popuputdown()
				this.$refs.praisePopup.open('bottom')
			},
			submitOrder() {
				console.log('点击了');
				clearTimeout(this.pagetimer);
				clearTimeout(this.popuptimer);
				this.$refs.praisePopup.close()
				setDot('CLICK_LOAN_SUBMIT')
				console.log('可以提交~订单编号是:', uni.getStorageSync('currntOrderId'));
				api.getSubmitOrder({
						jcno: uni.getStorageSync('currntOrderId'),
					})
					.then((data) => {
						console.log('订单提交成功!', data);
						uni.setStorageSync('currntOrderId',
							data.jcno
						)
						setDot('SYSTEM_LOAN_SUCCESS')
						uni.switchTab({
							url: '/pages/demo2/demo2'
						});
					})
					.catch((err) => {
						console.log('订单id获取失败', err);
					});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.flexrowspacearound {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.praisePopupbox {
		position: relative;
		padding-top: 40rpx;

		.iconposition {
			position: absolute;
			top: 70rpx;
			right: 30rpx;
			z-index: 999;
		}

		.imagebox {
			width: 100%;
			position: absolute;
			top: 0;
		}

		image {
			width: 100rpx;
			height: 100rpx;
			margin: 0rpx 10rpx;

		}
	}

	.praisePopup {
		width: 100vw;
		height: fit-content;
		padding: 50rpx 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		color: #222;
		border-radius: 40rpx 40rpx 0 0;
		padding-bottom: 30rpx;

		.quit-btn p {
			width: 44%;
			text-align: center;
			padding: 14rpx 10rpx;
			border-radius: 30rpx;
			border: 20rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;
			margin-top: 30rpx;
		}

		.quit-btn p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		.quit-btn p:nth-child(1) {
			background-color: #B6B6B6;
		}

		.quit-btn p:nth-child(2) {
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			background: linear-gradient(to right, #7F7FD5, #86A8E7);
			color: #fff;
		}

	}

	.P-2-box {
		width: 100%;
	}

	.P-2 {
		width: 90%;
		background-image: url('../../static/tipsbg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 140rpx;
		padding: 20rpx;
	}

	.P-word {
		margin: 0RPX 40rpx;
		margin-bottom: 40rpx;
	}

	.brightword {
		color: #CC9AF3;
		font-size: 60rpx;
	}

	.P-1 {
		margin-top: 160rpx;
		margin-bottom: 0rpx;

		image {
			width: 320rpx;
			height: 320rpx;
		}
	}

	.P-head {
		width: 100%;
		background-color: #1F2022;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: -110rpx;
	}




	.P-3 {
		width: 100%;
		margin: 40rpx 0rpx;

		p {
			width: 90%;
			height: 90rpx;
			background-color: #FFF584;
			text-align: center;
			color: #000;
			line-height: 90rpx;
			border-radius: 20rpx;
			font-size: 40rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;

		}

		p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		@keyframes pulsebtn {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.08);
			}

			100% {
				transform: scale(1);
			}
		}

	}


	.flexrowspacebetween {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexrowstart {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flexcenter {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
</style>